import "./ZTlogin.css";
import ZTloginimg from '../../assets/ZTlogin.png'
import { UserOutlined, LockOutlined, } from '@ant-design/icons';
import { Form, Button, Checkbox, Input } from "antd";
import api from '../../api/index'
import { useNavigate } from 'react-router-dom';

function ZTlogin() {
    const navigate = useNavigate();
    const onFinish = async (values: any) => {
        try {
            const response = await api.post('/login', values);
            const { username } = response.data;
            // 登录成功，存储 token 到本地存储
            localStorage.setItem('username', username);
            // 显示成功消息
            console.log('登录成功');
            // 跳转到指定页面，这里假设跳转到 '/dashboard'
            // navigate('/dashboard');
        } catch (error: any) {
            // 处理登录失败的情况
            const status = error.response?.status;
            const messageText = error.response?.data?.message || '登录失败，请稍后重试';
            if (status === 401) {
                console.log('账号或密码错误');
            } else if (status === 402) {
                console.log('密码错误');
            } else {
                console.log(messageText);
            }
            
        }
    };

    return (
        <div className="ZTlogin">
            <div className="ZTloginmain">
                <img src={ZTloginimg} alt="" />
                <div>
                    <h2>门诊医生工作站</h2>
                    <p>数字引领医疗信息时代</p>
                    <div style={{ width: '80%', margin: 'auto' }}>
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                        >
                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: '用户名不能为空' }]}
                            >
                                <Input
                                    prefix={<UserOutlined className="site-form-item-icon" />}
                                    placeholder="请输入用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{ required: true, message: '密码不能为空' }]}
                            >
                                <Input.Password
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="password"
                                    placeholder="请输入密码"
                                />
                            </Form.Item>
                            
                            <Form.Item>
                                <Form.Item name="remember" valuePropName="checked" noStyle>
                                    <Checkbox>记住我</Checkbox>
                                </Form.Item>

                                <a className="login-form-forgot" href="/wang">
                                    忘记密码
                                </a>
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default ZTlogin;